<template>
<div>
  <el-row class="tac">
    <el-col :span="4">
      <h3 class="listHeader">课程介绍</h3>
      <el-menu
        default-active="2"
        class="el-menu-vertical"
        @open="handleOpen"
        @close="handleClose"
        background-color="#EBEBEB"
        text-color="#000000"
        active-text-color="#D85154">

        <el-menu-item index="1" @click="displayCourseIntroduction()">
          <span slot="title">课程简介</span>
        </el-menu-item>

        <el-menu-item index="2">
          <span slot="title">教学方法</span>
        </el-menu-item>

        <el-menu-item index="3">
          <span slot="title">课程大纲</span>
        </el-menu-item>

        <el-menu-item index="4">
          <span slot="title">课程安排</span>
        </el-menu-item>
        <el-menu-item index="5">
        <span slot="title">课程理念与目标</span>
        </el-menu-item>
        <el-menu-item index="6">
        <span slot="title">课程动态</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</div>
</template>

<script>
    export default {
        name: "portalList",
        methods: {
          displayCourseIntroduction(courseId){

          }
        }
    }
</script>

<style scoped>
 .listHeader{
   height: 40px;
   background: -webkit-linear-gradient(#F45F5F, #D85154); /* Safari 5.1 - 6.0 */
   background: -o-linear-gradient(#F45F5F, #D85154); /* Opera 11.1 - 12.0 */
   background: -moz-linear-gradient(#F45F5F, #D85154); /* Firefox 3.6 - 15 */
   background: linear-gradient(#F45F5F, #D85154); /* 标准的语法（必须放在最后） */
   text-align: center;
   color: #ffffff;
   padding-top: 10px;
 }
  .el-menu-vertical{
    algi: -40px;
  }
</style>
